<template>
  <basic-container>
    <avue-crud
      :option="option"
      :search.sync="search"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @sort-change="sortChange"
      @on-load="onLoad"
    >
      <template slot-scope="" slot="companiesForm">
        <div class="pay-company-box">
          <div
            class="pay-company-item"
            v-for="item in companyList"
            :key="item.id"
          >
            <span>{{ item.compName }}</span>
            <el-switch
              v-model="item.value"
              :disabled="item.disabled"
              active-color="#a1c4fd"
              inactive-color="#e2ebf0"
            >
            </el-switch>
          </div>
        </div>
      </template>
      <template slot-scope="" slot="functionsForm">
        <div class="pay-company-box">
          <div
            class="pay-company-item"
            v-for="item in functionList"
            :key="item.id"
          >
            <span>{{ item.functionName }}</span>
            <el-switch
              v-model="item.value"
              :disabled="item.disabled"
              active-color="#a1c4fd"
              inactive-color="#e2ebf0"
            >
            </el-switch>
          </div>
        </div>
      </template>
      <template slot-scope="" slot="areasForm">
        <haruyukiCascader
          :isShow="isShow"
          :cascaderValue="provCityData"
          placeholder="请选择可发展区域"
          :disabled="isTreeDis"
          ref="toCascader"
        />
      </template>
      <template slot-scope="scope" slot="aisleButtonForm">
        <div class="pay-company-box pay-justify-content">
          <el-button
            icon="el-icon-circle-check"
            type="primary"
            @click="handleAisleSubmit()"
            >提 交</el-button
          >
          <el-button icon="el-icon-set-up" @click="handleEdit(scope)"
            >编 辑</el-button
          >
        </div>
      </template>
      <template slot-scope="scope" slot="compButtonForm">
        <div class="pay-company-box pay-justify-content">
          <el-button
            icon="el-icon-circle-check"
            type="primary"
            @click="handleCompSubmit()"
            >提 交</el-button
          >
          <el-button icon="el-icon-set-up" @click="handleEdit(scope)"
            >编 辑</el-button
          >
        </div>
      </template>
      <template slot-scope="scope" slot="funcButtonForm">
        <div class="pay-company-box pay-justify-content">
          <el-button
            icon="el-icon-circle-check"
            type="primary"
            @click="handleFuncSubmit()"
            >提 交</el-button
          >
          <el-button icon="el-icon-set-up" @click="handleEdit(scope)"
            >编 辑</el-button
          >
        </div>
      </template>
      <template slot-scope="scope" slot="areaButtonForm">
        <div class="pay-company-box pay-justify-content">
          <el-button
            icon="el-icon-circle-check"
            type="primary"
            @click="handleTreeSubmit()"
            >提 交</el-button
          >
          <el-button icon="el-icon-set-up" @click="handleEdit(scope)"
            >编 辑</el-button
          >
        </div>
      </template>
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.pay_aisle_delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
      <template slot="menuRight">
        <el-button
          type="success"
          size="small"
          plain
          icon="el-icon-upload2"
          v-if="permission.pay_aisle_import"
          @click="handleImport"
          >导入
        </el-button>
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          v-if="permission.pay_aisle_export"
          @click="handleExport"
          >导出
        </el-button>
      </template>
      <template slot-scope="{ row }" slot="ipLimit">
        <!-- <el-tag>{{ row.rpiStatusName }}</el-tag> -->
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="row.ipLimit"
          @change="handleSwitch(row)"
        >
        </el-switch>
      </template>
    </avue-crud>
    <el-dialog
      title="数据导入"
      append-to-body
      :visible.sync="excelBox"
      width="555px"
    >
      <avue-form
        :option="excelOption"
        v-model="excelForm"
        :upload-after="uploadAfter"
      >
        <template slot="excelTemplate">
          <el-button type="primary" @click="handleTemplate">
            点击下载<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </template>
      </avue-form>
    </el-dialog>
  </basic-container>
</template>

<script>
import {
  getList,
  getDetail,
  add,
  update,
  remove,
  aisleUpdate,
  compSaveLink,
  funcSaveLink,
  submitTree,
  ipLimitChange,
} from "@/api/rb-core/aisle/pay_aisle";
import { getCompanyList } from "@/api/rb-core/payCompany/pay_company";
import { getFunctionList } from "@/api/rb-core/payFunction/pay_function";
// import { getLazyTree } from "@/api/base/region";
import { mapGetters } from "vuex";
import { getToken } from "@/util/auth";
import haruyukiCascader from "@/components/module/haruyuki-cascader";

export default {
  components: {
    haruyukiCascader,
  },
  data() {
    return {
      form: {},
      query: {},
      search: {},
      topCode: "00", //可发展区域 传值编号
      isShow: true,
      loading: true,
      excelBox: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      companyList: [],
      functionList: [],
      isAisleDis: true,
      isCompDis: true,
      isFuncDis: true,
      isTreeDis: true,
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        searchMenuSpan: 6,
        columnBtn: false,
        updateBtn: false,
        column: [
          // {
          //   label: "主键",
          //   prop: "id",
          //   display: false
          // },
          {
            label: "通道编号",
            prop: "aisleCode",
            display: false,
            overHidden: true,
          },
          {
            label: "通道名称",
            prop: "aisleName",
            display: false,
            overHidden: true,
          },
          {
            label: "通道别名",
            prop: "aisleAlias",
            display: false,
            overHidden: true,
          },
          // {
          //   label: "服务商编号",
          //   prop: "seId",
          //   display: false
          // overHidden: true,
          // },
          {
            label: "通道机构号",
            prop: "cerId",
            display: false,
            overHidden: true,
          },
          {
            label: "平台服务商编号",
            prop: "coOperatorNo",
            display: false,
            overHidden: true,
          },
          {
            label: "通道类型",
            prop: "aisleTypeName",
            display: false,
            overHidden: true,
          },
          {
            label: "结算类型",
            prop: "aisleSettleTypeName",
            display: false,
            overHidden: true,
          },
          {
            label: "权重",
            prop: "aisleWeights",
            display: false,
            overHidden: true,
          },
          {
            label: "IP限制",
            prop: "ipLimit",
            type: "select",
            value: "1",
            dataType: "string",
            showColumn: false,
            rules: [
              {
                required: true,
                message: "请输入IP限制",
                trigger: "blur",
              },
            ],
          },
          {
            label: "通道类型",
            prop: "aisleType",
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=aisle_type",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dataType: "string",
            search: true,
            hide: true,
            display: false,
            rules: [
              {
                required: true,
                message: "请输入通道类型",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "结算类型",
            prop: "aisleSettleType",
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=aisle_settle_type",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dataType: "string",
            search: true,
            hide: true,
            display: false,
            rules: [
              {
                required: true,
                message: "请输入结算类型",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
        ],
        group: [
          {
            label: "基础信息",
            prop: "baseInfo",
            icon: "el-icon-user-solid",
            column: [
              {
                label: "通道编号",
                prop: "aisleCode",
                type: "input",
                sortable: true,
                search: true,
                rules: [
                  {
                    required: true,
                    message: "请输入通道编号",
                    trigger: "blur",
                  },
                ],
              },

              {
                label: "通道名称",
                prop: "aisleName",
                type: "input",
                sortable: true,
                search: true,
                editDisabled: false,
                rules: [
                  {
                    required: true,
                    message: "请输入通道名称",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "通道别名",
                prop: "aisleAlias",
                type: "input",
                sortable: true,
                search: true,
                editDisabled: false,
                rules: [
                  {
                    required: true,
                    message: "请输入通道别名",
                    trigger: "blur",
                  },
                ],
              },
              // {
              //   label: "服务商编号",
              //   prop: "seId",
              //   type: "input",
              //   sortable: true,
              //   search: true,
              //   rules: [
              //     {
              //       required: true,
              //       message: "请输入服务商编号",
              //       trigger: "blur",
              //     },
              //   ],
              // },
              {
                label: "通道机构号",
                labelWidth: 100,
                prop: "cerId",
                type: "input",
                sortable: true,
                editDisabled: false,
                rules: [
                  {
                    required: true,
                    message: "请输入通道机构号",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "平台服务商编号",
                labelWidth: 130,
                prop: "coOperatorNo",
                type: "input",
                sortable: true,
                editDisabled: false,
                rules: [
                  {
                    required: true,
                    message: "请输入通道机构号",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "通道类型",
                prop: "aisleType",
                type: "select",
                sortable: true,
                dicUrl: "/api/blade-system/dict/dictionary?code=aisle_type",
                props: {
                  label: "dictValue",
                  value: "dictKey",
                },
                dataType: "string",
                editDisabled: false,
                rules: [
                  {
                    required: true,
                    message: "请输入通道类型",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "结算类型",
                prop: "aisleSettleType",
                type: "select",
                sortable: true,
                dicUrl:
                  "/api/blade-system/dict/dictionary?code=aisle_settle_type",
                props: {
                  label: "dictValue",
                  value: "dictKey",
                },
                dataType: "string",
                editDisabled: false,
                rules: [
                  {
                    required: true,
                    message: "请输入结算类型",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "权重",
                prop: "aisleWeights",
                type: "input",
                sortable: true,
                editDisabled: false,
                rules: [
                  {
                    required: true,
                    message: "请输入权重",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "商户类型",
                prop: "aisleMerchantType",
                type: "select",
                sortable: true,
                dicUrl:
                  "/api/blade-system/dict/dictionary?code=merchant_type",
                props: {
                  label: "dictValue",
                  value: "dictKey",
                },
                dataType: "string",
                editDisabled: false,
                rules: [
                  {
                    required: true,
                    message: "请输入商户类型",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "激活奖励",
                prop: "aisleActiveType",
                type: "switch",
                sortable: true,
                editDisabled: false,
                dicData: [{
                  label: '系统激活',
                  value: 0
                },{
                  label: '通道激活',
                  value: 1
                }],
                value: 0,
                rules: [
                  {
                    required: true,
                    message: "请输入激活奖励类型",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "支付通道图标",
                span: 24,
                prop: "logoUrl",
                type: 'upload',
                listType: 'picture-img',
                dataType: 'string',
                action: '/api/blade-resource/oss/endpoint/put-file-public',
                editDisabled: false,
                propsHttp: {
                  res: 'data',
                  url: 'link',
                },
                rules: [
                  {
                    required: true,
                    message: "请上传支付通道图标",
                    trigger: "blur",
                  },
                ]
              },
              {
                prop: "aisleButton",
                span: 24,
                labelWidth: 0,
                formslot: true,
                showColumn: false,
                slot: true,
                addDisplay: false,
                viewDisplay: false,
                hide: true,
              },
            ],
          },
          {
            label: "支付公司",
            prop: "companiesInfo",
            icon: "el-icon-s-order",
            column: [
              {
                label: "",
                labelWidth: 0,
                prop: "companies",
                type: "select",
                span: 24,
                sortable: true,
              },
              {
                prop: "compButton",
                span: 24,
                labelWidth: 0,
                formslot: true,
                showColumn: false,
                slot: true,
                addDisplay: false,
                viewDisplay: false,
                hide: true,
              },
            ],
          },
          {
            label: "支付功能",
            prop: "functionsInfo",
            icon: "el-icon-s-order",
            column: [
              {
                label: "",
                labelWidth: 0,
                prop: "functions",
                type: "select",
                span: 24,
                sortable: true,
              },
              {
                prop: "funcButton",
                span: 24,
                labelWidth: 0,
                formslot: true,
                showColumn: false,
                slot: true,
                addDisplay: false,
                viewDisplay: false,
                hide: true,
              },
            ],
          },
          {
            label: "可发展区域",
            prop: "areaInfo",
            icon: "el-icon-s-order",
            column: [
              {
                // label: "选择区域",
                labelWidth: 0,
                prop: "areas",
                span: 24,
                formslot: true,
                // multiple: true,
                // type: "tree",
                // loading: true,
                // dicData: [],
                // checkStrictly: true,
                // props: {
                //   label: 'title',
                //   id: 'id',
                //   children: "children",
                // },
                // rules: [{
                //   required: true,
                //   message: "请选择所属区域",
                //   trigger: "click"
                // }]
              },
              {
                prop: "areaButton",
                span: 24,
                labelWidth: 0,
                formslot: true,
                showColumn: false,
                slot: true,
                addDisplay: false,
                viewDisplay: false,
                hide: true,
              },
            ],
          },
        ],
      },
      data: [],
      excelForm: {},
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "模板上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "模板上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/rb-core/core/aisle/pay_aisle/import",
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24,
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.pay_aisle_add, false),
        viewBtn: this.vaildData(this.permission.pay_aisle_view, false),
        delBtn: this.vaildData(this.permission.pay_aisle_delete, false),
        editBtn: this.vaildData(this.permission.pay_aisle_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  methods: {
    /**
     * @func 编辑初始化表单支付数据
     * @desc 支付公司、功能数据回显
     * @param {String} companies - 支付公司数据回显
     * @param {String} functions - 支付功能数据回显
     * */
    initTree(companies, functions) {
      getCompanyList("1", "-1").then((res) => {
        this.companyList = res.data.data.records;
        this.companyList.map((item) => {
          this.$set(item, "value", false);
          this.$set(item, "disabled", false);
          if (companies) {
            item.disabled = true;
            for (let j = 0; j < companies.length; j++) {
              if (item.compNo == companies[j].compNo) {
                item.value = true;
              }
            }
          }
        });
      });
      getFunctionList("1", "-1").then((res) => {
        this.functionList = res.data.data.records;
        this.functionList.map((item) => {
          this.$set(item, "value", false);
          this.$set(item, "disabled", false);
          if (functions) {
            item.disabled = true;
            for (let j = 0; j < functions.length; j++) {
              if (item.functionCode == functions[j].functionCode) {
                item.value = true;
              }
            }
          }
        });
      });
    },
    /**
     * @func 开关
     * @desc 商户开关 禁用启用
     * @param {Object} row - 商户信息
     * */
    handleSwitch(row) {
      ipLimitChange({id:row.id, ipLimit:row.ipLimit}).then(
        () => {},
        (error) => {
          row.ipLimit = row.ipLimit == 1 ? 0 : 1;
          window.console.log(error);
        }
      );
    },
    rowSave(row, done, loading) {
      let companyList = [];
      let functionList = [];
      for (const cItem of this.companyList) {
        if (cItem.value) {
          companyList.push(cItem.compNo);
        }
      }
      for (const fItem of this.functionList) {
        if (fItem.value) {
          functionList.push(fItem.functionCode);
        }
      }
      // const areasList = this.$refs.treeMenu.getCheckedKeys();
      // row.areas = areasList;
      const nodesList =
        this.$refs["toCascader"].$refs.cascader.getCheckedNodes(true);
      const areasList = [];
      for (const item of nodesList) {
        areasList.push(item.value);
      }
      row.areas = areasList;
      row.companies = companyList;
      row.functions = functionList;
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    /**
     * @func 表单基础信息通过编辑执行禁止切换
     * @desc 通过点击表单"编辑"进行禁止的切换
     * @param {Boolean} isAisleDis - 禁止状态
     * */
    aisleDisabled() {
      if (this.isAisleDis) {
        this.isAisleDis = false;
        for (const iterator of this.option.group[0].column) {
          iterator.editDisabled = true;
        }
      } else {
        this.isAisleDis = true;
        for (const iterator of this.option.group[0].column) {
          iterator.editDisabled = false;
        }
      }
    },
    /**
     * @func 表单支付公司通过编辑执行禁止切换
     * @desc 通过点击表单"编辑"进行禁止的切换
     * @param {Boolean} isCompDis - 禁止状态
     * */
    compDisabled() {
      if (this.isCompDis) {
        this.isCompDis = false;
        this.companyList.map((item) => {
          item.disabled = false;
        });
      } else {
        this.isCompDis = true;
        this.companyList.map((item) => {
          item.disabled = true;
        });
      }
    },
    /**
     * @func 表单支付功能通过编辑执行禁止切换
     * @desc 通过点击表单"编辑"进行禁止的切换
     * @param {Boolean} isFuncDis - 禁止状态
     * */
    funcDisabled() {
      if (this.isFuncDis) {
        this.isFuncDis = false;
        this.functionList.map((item) => {
          item.disabled = false;
        });
      } else {
        this.isFuncDis = true;
        this.functionList.map((item) => {
          item.disabled = true;
        });
      }
    },
    /**
     * @func 表单区域树形通过编辑执行禁止切换
     * @desc 通过点击表单"编辑"进行禁止的切换
     * @param {Boolean} isTreeDis - 禁止状态
     * @param {Function} isDisabledFn - 禁止操作
     * */
    treeDisabled() {
      if (this.isTreeDis) {
        this.isTreeDis = false;
        // this.isDisabledFn();
      } else {
        this.isTreeDis = true;
        // this.isDisabledFn();
      }
    },
    handleAisleSubmit() {
      const _this = this;
      if (_this.isAisleDis) {
        let row = {
          id: _this.form.id,
          aisleCode: _this.form.aisleCode,
          aisleName: _this.form.aisleName,
          aisleAlias: _this.form.aisleAlias,
          aisleType: _this.form.aisleType,
          aisleSettleType: _this.form.aisleSettleType,
          aisleWeights: _this.form.aisleWeights,
          aisleMerchantType: _this.form.aisleMerchantType,
          aisleActiveType: _this.form.aisleActiveType,
          logoUrl:  _this.form.logoUrl,
          cerId: _this.form.cerId,
          coOperatorNo: _this.form.coOperatorNo,
        };
        aisleUpdate(row).then(
          () => {
            _this.onLoad(_this.page);
            _this.$message({
              type: "success",
              message: "操作成功!",
            });
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else {
        _this.$message({
          type: "warning",
          message: "请先编辑表单后再提交!",
        });
      }
    },
    handleCompSubmit() {
      const _this = this;
      if (!_this.isCompDis) {
        let companyList = [];
        for (const cItem of _this.companyList) {
          if (cItem.value) {
            companyList.push(cItem.compNo);
          }
        }
        let row = {
          aisleCode: _this.form.aisleCode,
          companies: companyList,
        };
        compSaveLink(row).then(
          () => {
            _this.onLoad(_this.page);
            _this.$message({
              type: "success",
              message: "操作成功!",
            });
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else {
        _this.$message({
          type: "warning",
          message: "请先编辑表单后再提交!",
        });
      }
    },
    handleFuncSubmit() {
      const _this = this;
      if (!_this.isFuncDis) {
        let functionList = [];
        for (const fItem of this.functionList) {
          if (fItem.value) {
            functionList.push(fItem.functionCode);
          }
        }
        let row = {
          aisleCode: _this.form.aisleCode,
          functions: functionList,
        };
        funcSaveLink(row).then(
          () => {
            _this.onLoad(_this.page);
            _this.$message({
              type: "success",
              message: "操作成功!",
            });
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else {
        _this.$message({
          type: "warning",
          message: "请先编辑表单后再提交!",
        });
      }
    },
    // 可发展区域
    handleTreeSubmit() {
      const _this = this;
      if (!_this.isTreeDis) {
        const nodesList =
          this.$refs["toCascader"].$refs.cascader.getCheckedNodes(true);
        const areasList = [];
        for (const item of nodesList) {
          areasList.push(item.value);
        }
        let row = {
          aisleCode: _this.form.aisleCode,
          areas: areasList,
        };
        // areasList
        submitTree(row).then(
          () => {
            _this.onLoad(_this.page);
            _this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.setTree(row.areas);
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else {
        _this.$message({
          type: "warning",
          message: "请先编辑表单后再提交!",
        });
      }
    },
    setTree(DATA) {
      let cities = DATA;
      let list = [];
      for (const areas of cities) {
        list.push([areas.substring(0, 2), areas]);
      }
      this.provCityData = list;
    },
    handleEdit(scope) {
      const _this = this;
      if (scope.column.prop == "aisleButton") {
        _this.aisleDisabled();
      } else if (scope.column.prop == "compButton") {
        _this.compDisabled();
      } else if (scope.column.prop == "funcButton") {
        _this.funcDisabled();
      } else if (scope.column.prop == "areaButton") {
        _this.treeDisabled();
      }
    },
    async beforeOpen(done, type) {
      this.provCityData = [];
      if (["edit", "view"].includes(type)) {
        this.isShow = false;
        await getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
          /* 因懒加载不显示 默认展开子节点的父级节点 */
          let cities = res.data.data.cities;
          let list = [];
          for (const areas of cities) {
            list.push([areas.substring(0, 2), areas]);
          }
          this.$nextTick(() => {
            this.provCityData = list;

            this.isShow = true;
          });
          const companies = res.data.data.companies;
          const functions = res.data.data.functions;
          this.initTree(companies, functions);
        });
        this.isAisleDis = true;
        this.isCompDis = true;
        this.isFuncDis = true;
        this.isTreeDis = true;
        this.aisleDisabled();
      } else if (["add"].includes(type)) {
        this.initTree();
        this.isTreeDis = false;
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    handleImport() {
      this.excelBox = true;
    },
    handleExport() {
      let exQuery = ``;
      exQuery += `&aisleCode=${this.search.aisleCode}`;
      exQuery += `&aisleName=${this.search.aisleName}`;
      exQuery += `&aisleAlias=${this.search.aisleAlias}`;
      // exQuery += `&seId=${this.search.seId}`;
      exQuery += `&aisleType=${this.search.aisleType}`;
      exQuery += `&aisleSettleType=${this.search.aisleSettleType}`;
      this.$confirm("是否导出用户数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        window.open(
          `/api/rb-core/core/aisle/pay_aisle/export?${
            this.website.tokenHeader
          }=${getToken()}` + exQuery
        );
      });
    },
    handleTemplate() {
      window.open(
        `/api/rb-core/core/aisle/pay_aisle/export-template?${
          this.website.tokenHeader
        }=${getToken()}`
      );
    },
    uploadAfter(res, done) {
      this.excelBox = false;
      this.refreshChange();
      done();
    },
    sortChange(val) {
      if (val.order == "ascending") {
        //正序
        this.query.ascs = val.prop;
        this.query.descs = "";
      } else {
        //倒序
        this.query.descs = val.prop;
        this.query.ascs = "";
      }
      this.refreshChange();
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-company-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-content: flex-start;
  flex-flow: row wrap;
  align-items: center;
  &.pay-justify-content {
    justify-content: center;
  }
  .pay-company-item {
    width: 200px;
  }
  span {
    display: inline-block;
    margin-right: 6px;
  }
}
</style>
